<template>
	<div>
		<el-form class="query-form" :model="scale_params">
			<el-row>
		    <el-col class="query-item"  style="width:100%">
		    	<el-form-item label="当前返佣比例" prop="phone">
				<el-row>:{{(scale_info.cash_back_ratio*100).toFixed(2)}}%</el-row>	
				</el-form-item>
			</el-col>
			<el-col class="query-item" :span="6">
				<el-form-item label="返佣比例（%）" prop="scale">
					<el-input v-model="scale_params.scale" type="number" autocomplete="off" placeholder="请输入返佣比例" />
				</el-form-item>
			</el-col>
			<el-col class="query-item" :span="6">
				<el-form-item >
					<el-button type="primary" @click="submit">修改</el-button>
				</el-form-item>
			</el-col>

		  </el-row>
		</el-form>
	</div>
</template>
<script type="text/javascript">
	import {  ElMessageBox ,ElMessage} from 'element-plus'

	export default {
		data(){
			return {
				scale_info:{},
				scale_params:{}
			}
		},
		methods:{
			async submit(){
				const res =await this.$API.setScale({ratio:this.scale_params.scale/100});
				if(res.code == 200 ) {
					ElMessage({
						message: "操作成功",
						type: 'success',
					})
					this.getInfo()
				}
			},
			getInfo(){
				this.$API.getScaleInfo({
					ratio:(this.scale_params.scale/100).toFixed(2)
				}).then(res=>{
					if(res.code==200){
						this.scale_info = res.data
					}
				})
			},
		},
		mounted(){
			this.getInfo();
		}
	}
</script>
<style type="text/css">
	.pagination_box{
		    text-align: center;
		    display: flex;
		    justify-content: center;
		    width: 100%;
	}
	.query-item{
		margin-right:10px
	}
	.query-form{
		    padding:20px;
				    padding-bottom: 0px;
	}
	.add-box-css{
		width:100%;
		align-items: end;
    justify-content: end;
    padding: 0px 1rem 1rem 0px;
	}
	.list-avatar{
		width:66px !important;
		height:66px !important
	}
</style>
